<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吸顶灯效果</title>
		<style>
			/*顶部样式*/
			.top_context{
				height: 200px;
				background-color: #e0e0e0;
				text-align: center;
				line-height: 200px;
			}
			/*吸顶灯内容元素初始效果*/
			.sticky_element{
				height: 50px;
				background-color: #333;
				color: #fff;
				text-align: center;
				line-height: 50px;
			}
			/*页面主体区域*/
			.main_context{
				height: 8000px;
				background-color: #e0e0e0;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
		<script>
			//鼠标移动到顶部内容区域---弹出文本：我是顶部元素
			$(".top_context").mouseenter(function(){
				//BOM形式输出：浏览器弹窗输出文本效果
				alert("我是顶部元素");
			})
		</script> 
	</head>
	<body>
		<!-- 顶部内容：导航 -->
		<div class="top_context">顶部内容区域</div>
		<!-- 吸顶灯内容 -->
		<div class="sticky_element">我是吸顶元素</div>
		<!-- 页面主体内容 -->
		<div class="main_context">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ex similique cumque laboriosam possimus provident nulla nostrum eaque veritatis exercitationem unde beatae fugiat accusantium saepe error reiciendis, maxime aperiam eligendi. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium perspiciatis suscipit quia distinctio, officiis repellendus vel iusto pariatur ducimus temporibus neque blanditiis exercitationem possimus assumenda laborum labore, optio voluptas sunt. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem tempore esse, necessitatibus perspiciatis sint quidem facere porro? Tempore possimus fugiat aliquam libero, reprehenderit numquam, non, in enim facere ut consectetur? Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, saepe? Sunt iusto, totam suscipit nesciunt aliquam consequuntur molestiae dolorem? Consequatur ipsum quo, odit suscipit minus voluptatibus. Deleniti saepe inventore suscipit.</div>
		<script>
			//鼠标移动到顶部内容区域---弹出文本：我是顶部元素
			$(".top_context").mouseenter(function(){
				//BOM形式输出：浏览器弹窗输出文本效果
				alert("我是顶部元素");
			})
		</script>
	</body>
</html>